<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--from:https://github.com/givebest/GB-canvas-turntable-->
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>GB Canvas Turntable</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <style>
        .wrapper {
            padding: 20px 40px;
        }

        .gb-turntable a.gb-turntable-btn {
            border: none;
        }

    </style>
</head>
<body ontouchstart>


<div class="wrapper typo" id="wrapper">

    <h1>GB-canvas-turntable.js</h1>

    <h2>DEMO</h2>


    <h3><a href="javascript:;" id="normal">普通</a></h3>


    <section id="turntable" class="gb-turntable">
        <div class="gb-turntable-container">
            <canvas class="gb-turntable-canvas" width="500px" height="500px">抱歉！浏览器不支持。</canvas>
        </div>

        <a class="gb-turntable-btn" href="javascript:;">抽奖</a>
    </section>


</div>

<script src="js/main.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        gbTurntable.init({
            id: 'turntable',
            config: function (callback) {
                // 获取奖品信息
                callback && callback(['1', '23', '44', '21', '22', '44', '14', '55', '66', '67', '98', '88', '66', '67', '98', '88', '21', '22', '44', '14', '55', '66', '67', '98', '88', '66', '67', '98', '88']);
            },
            getPrize: function (callback) {
                // 获取中奖信息
                var num = Math.random() * 6 >>> 0,   //奖品ID
                    chances = num;  // 可抽奖次数
                console.log(num + ";;;" + chances);

                callback && callback([num, chances]);
            },
            gotBack: function (data) {
                alert('恭喜抽中' + data);
            }
        });
    }, false);
</script>
</body>
</html>